// JavaScript Document
// 动画矩形
class AnimatedRectangle extends AnimatedObject {
  constructor(objectID, label, width, height, xJust, yJust) {
    super();
    this.objectID = objectID ; // 物体的ID
    this.label = label ; // 物体的标签
    this.width = width ; // 宽度
    this.height = height ; // 高度
    this.xJustify = xJust ; // x位置信息
    this.yJustify = yJust ; // y位置信息
    this.addToScene = true ; // 是否加入画布
  }

  // 获得最左侧x坐标
  left() {
    let xPos;
    if(this.xJustify == 'center') {
      xPos = parseInt(this.x - this.width/2) ;
    }
    else if(this.xJustify == 'left') {
      xPos = this.x ;
    }
    else if(this.xJustify == 'right') {
      xPos = parseInt(this.x - this.width) ;
    }
    return xPos ;
  }

  // 获得最右侧x坐标
  right() {
    let xPos;
    if(this.xJustify == 'center') {
      xPos = parseInt(this.x + this.width/2) ;
    }
    else if(this.xJustify == 'left') {
      xPos = parseInt(this.x + this.width) ;
    }
    else if(this.xJustify == 'right') {
      xPos = this.x ;
    }
    return xPos ;
  }

  // 获得最上侧y坐标
  top() {
    let yPos;
    if(this.yJustify == 'center') {
      yPos = parseInt(this.y - this.height/2) ;
    }
    else if(this.yJustify == 'top') {
      yPos = this.y ;
    }
    else if(this.yJustify == 'bottom') {
      yPos = parseInt(this.y - this.height) ;  ;
    }
    return yPos ;
  }

  // 获得最下侧y坐标
  bottom() {
    let yPos;
    if(this.yJustify == 'center') {
      yPos = parseInt(this.y + this.height/2) ;
    }
    else if(this.yJustify == 'top') {
      yPos = parseInt(this.y + this.height) ;
    }
    else if(this.yJustify == 'bottom') {
      yPos = this.y ;
    }
    return yPos ;
  }

  // 获得中间的x坐标
  centerX() {
    let xPos;
    if(this.xJustify == 'center') {
      xPos = this.x ;
    }
    else if(this.xJustify == 'left') {
      xPos = parseInt(this.x + this.width/2) ;
    }
    else if(this.xJustify == 'right') {
      xPos = parseInt(this.x - this.width/2) ;
    }
    return xPos ;
  }

  // 获得中间的y坐标
  centerY() {
    let yPos;
    if(this.yJustify == 'center') {
      yPos = this.y ;
    }
    else if(this.yJustify == 'top') {
      yPos = parseInt(this.y + this.height/2) ;
    }
    else if(this.yJustify == 'bottom') {
      yPos = parseInt(this.y - this.height/2) ;
    }
    return yPos ;
  }

  // 画图
  draw(ctx) {
    let startX; // 左上角的X坐标
    let startY; // 左上角的Y坐标
    let labelX; // 文字的X坐标
    let labelY; // 文字的Y坐标
    // 通过justX和justY来计算左上角点的坐标和文字的坐标
    if(this.xJustify.toUpperCase() == 'LEFT') {
      startX = this.x ;
      labelX = this.x + this.width/2 ;
    }
    else if(this.xJustify.toUpperCase() == 'CENTER') {
      startX = this.x - this.width/2 ;
      labelX = this.x ;
    }
    else if(this.xJustify.toUpperCase() == 'RIGHT') {
      startX = this.x - this.width ;
      labelX = this.x - this.width/2 ;
    }
    if(this.yJustify.toUpperCase() == 'TOP') {
      startY = this.y ;
      labelY = this.y + this.height/2 ;
    }
    else if(this.yJustify.toUpperCase() == 'CENTER') {
      startY = this.y - this.height/2 ;
      labelY = this.y ;
    }
    else if(this.yJustify.toUpperCase() == 'BOTTOM') {
      startY = this.y - this.height ;
      labelY = this.y - this.height/2 ;
    }
    // 开始画图
    ctx.beginPath() ;
    // 设置透明度
    ctx.globalAlpha = 1.0 ;
    // 画背景
    ctx.moveTo(startX, startY) ;
    ctx.lineTo(startX+this.width, startY) ;
    ctx.lineTo(startX+this.width, startY+this.height) ;
    ctx.lineTo(startX, startY+this.height) ;
    ctx.fillStyle = this.backgroundColor ;
    ctx.fill() ;
    // 画外框
    ctx.moveTo(startX, startY) ;
    ctx.lineTo(startX+this.width, startY) ;
    ctx.lineTo(startX+this.width, startY+this.height) ;
    ctx.lineTo(startX, startY+this.height) ;
    ctx.lineTo(startX, startY) ;
    ctx.strokeStyle = this.foregroundColor ;
    ctx.lineWidth = 2 ;
    ctx.stroke() ;
    // 写文字
    ctx.font = "10px Arial" ;
    ctx.textAlign = "center" ;
    ctx.textBaseline = "middle" ;
    ctx.fillStyle = this.foregroundColor ;
    ctx.fillText(this.label, labelX, labelY) ;
    // 判断是否需要画高亮的圆
    if(this.highlighted) {
      ctx.beginPath() ;
      // 设置透明度
      ctx.globalAlpha = this.alpha;
      // 画背景
      ctx.moveTo(startX , startY) ;
      ctx.lineTo(startX+this.width , startY) ;
      ctx.lineTo(startX+this.width , startY+this.height) ;
      ctx.lineTo(startX , startY+this.height) ;
      ctx.lineTo(startX, startY) ;
      ctx.fillStyle = this.highlightColor ;
      ctx.fill() ;
    }
  }

  // 获得箭头的头部坐标
  getArrowHeadPoint(fromX, fromY) {
    let xDelta;
    let yDelta;
    let xPos;
    let yPos;
    // x
    if(this.left() > fromX) {
      xDelta = this.left() - fromX ;
      xPos = this.left() ;
    }
    else if(fromX > this.right()) {
      xDelta = fromX - this.right() ;
      xPos = this.right() ;
    }
    else {
      xDelta = 0 ;
      xPos = this.centerX() ;
    }
    // y
    if(this.bottom() > fromY) {
      yDelta = this.bottom() - fromY ;
      yPos = this.top() ;
    }
    else if(fromY > this.top()) {
      yDelta = fromY - this.top() ;
      yPos = this.bottom() ;
    }
    else {
      yDelta = 0 ;
      yPos = this.centerY() ;
    }
    // 比较delta
    if(xDelta > yDelta) {
      yPos = this.centerY() ;
    }
    else {
      xPos = this.centerX() ;
    }
    return [xPos, yPos] ;
  }

  // 获得箭头的尾部坐标
  getArrowTailPoint(fromX, fromY) {
    return this.getArrowHeadPoint(fromX, fromY) ;
  }
}